<template>
    <div class="app-container">
        <el-row :gutter="24">
            <el-col :span="24" :xs="24">
                <el-card class="box-card">
                    <div slot="header" class="clearfix" style="display: flex">
                        <custom-button type="add" @addClick="addClick" style="margin-right: 5px"></custom-button>
                        <custom-button type="edit" @editClick="editClick" style="margin-right: 5px"></custom-button>
                        <custom-button type="delete" @deleteClick="deleteClick" title="删除"></custom-button>
                    </div>
                    <div>
                        <!-- <div class="text-center">
                            11
                        </div> -->
                        <ul class="list-group list-group-striped">
                            <li class="list-group-item">
                                父级建筑
                                <div class="pull-right">{{ buildItem.PARENT_BD_Name ?? '--' }}</div>
                            </li>
                            <li class="list-group-item">
                                建筑名称
                                <div class="pull-right">{{ buildItem.BD_FULL_NAME ?? '--' }}</div>
                            </li>
                            <li class="list-group-item">
                                建筑简称
                                <div class="pull-right">{{ buildItem.BD_NAME ?? '--' }}</div>
                            </li>
                            <li class="list-group-item">
                                建筑编码
                                <div class="pull-right">{{ buildItem.BD_ID ?? '--' }}</div>
                            </li>
                            <li class="list-group-item">
                                建筑字母别名
                                <div class="pull-right">{{ buildItem.BD_ALIAS ?? '--' }}</div>
                            </li>
                            <!-- <li class="list-group-item">
                                索引码
                                <div class="pull-right">{{ buildItem.role ?? '--' }}</div>
                            </li> -->
                            <li class="list-group-item">
                                排序号
                                <div class="pull-right">{{ buildItem.ORDER_NO ?? '--' }}</div>
                            </li>
                            <li class="list-group-item">
                                建筑面积
                                <div class="pull-right">{{ buildItem.BD_AREA ?? '--' }}</div>
                            </li>
                            <li class="list-group-item">
                                建筑使用人数
                                <div class="pull-right">{{ buildItem.PERSON_COUNT ?? '--' }}</div>
                            </li>
                            <li class="list-group-item">
                                建筑区域分类
                                <div class="pull-right">{{ buildItem.BD_AREA_TYPE_NAME ?? '--' }}</div>
                            </li>
                            <li class="list-group-item">
                                建筑用途
                                <div class="pull-right">{{ buildItem.BD_USE_ID_NAME ?? '--' }}</div>
                            </li>
                            <li class="list-group-item">
                                建筑功能
                                <div class="pull-right">{{ buildItem.BD_FUN_NAME ?? '--' }}</div>
                            </li>
                            <li class="list-group-item">
                                建筑细化分类
                                <div class="pull-right">{{ buildItem.BD_TYPE_NAME ?? '--' }}</div>
                            </li>
                            <!-- <li class="list-group-item">
                               建筑图片
                                <div class="pull-right">{{ build.role }}</div>
                            </li> -->
                            <li class="list-group-item">
                                备注
                                <div class="pull-right">{{ buildItem.REMARK ?? '--' }}</div>
                            </li>
                        </ul>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <div v-if="dialogShow">
            <custom-dialog :title="dialogTitle" size="large" @dialogClose="dialogClose">
                <buildDialog @getData="getData" :setData="buildItem" :type="type"></buildDialog>
            </custom-dialog>
        </div>
    </div>
</template>

<script>
import customButton from '@/components/customComponents/customForm/customButton'
import buildDialog from './buildDialog'
import customDialog from '@/components/customComponents/customDialog'
import {AjaxCommon} from '@/libs/apiCommon'
import {PopupCommon} from '@/libs/popupCommon'
import {Utility} from '@/libs/utility'
export default {
    props: ['buildInfo'],
    name: 'Profile',
    components: {customButton, customDialog, buildDialog},
    data() {
        return {
            buildItem: {},
            dialogShow: false,
            dialogTitle: '新增',
            build: {},
            roleGroup: {},
            postGroup: {},
            activeTab: 'buildinfo',
            typeList: [],
            type: 'add'
        }
    },
    watch: {
        buildInfo: {
            handler(build) {
                if (build) {
                    this.buildItem = build
                    this.getBuild()
                }
            },
            immediate: true
        }
    },
    created() {
        this.buildItem = this.buildInfo
        this.getBuild()
    },
    methods: {
        dialogClose() {
            this.dialogShow = false
            this.$emit('success', '')
        },
        deleteClick() {
            if (typeof this.buildItem.BD_GUID == 'undefined') {
                PopupCommon.notify('info', '请先点击左侧建筑树进行选择')
                return
            }
            let self = this
            PopupCommon.confirm(`确定要删除建筑：【${this.buildItem.BD_NAME}】吗？`)
                .then(() => {
                    AjaxCommon(`/api/Build/DeleteBuild/${self.buildItem.BD_GUID}`, 'post', {}).then((res) => {
                        if (res?.data?.Code == 200) {
                            PopupCommon.notify('success', '删除成功')
                            self.buildItem = {}
                            self.$emit('success', 'success')
                        } else {
                            const msg = res?.data?.Message
                            if (msg) {
                                PopupCommon.notify('error', msg)
                            }
                        }
                    })
                })
                .catch(() => {
                    // 这里尽量写下，否则会报警告异常。
                    console.log('已取消删除')
                })
        },
        editClick() {
            if (this.buildItem?.BD_GUID) {
                this.type = 'edit'
                this.dialogTitle = '编辑'
                this.dialogShow = true
            } else {
                PopupCommon.notify('info', '请点击左侧建筑列表进行编辑')
            }
        },
        addClick() {
            this.type = 'add'
            this.dialogTitle = '新增'
            this.dialogShow = true
        },
        getData(e) {
            console.log(e)
            const oprText = e.BD_GUID == '' ? '新增' : '编辑'
            let self = this
            e.IS_DELETE = 0
            if (e.BD_GUID == '') {
                AjaxCommon(`/api/Build/AddBuild`, 'post', e).then((res) => {
                    if (res?.data?.Code == 200) {
                        PopupCommon.notify('success', oprText + '成功，您可继续编辑并进行新增操作或点击关闭按钮刷新左侧列表')
                        self.dialogShow = false
                        self.$emit('success', 'success')
                    } else {
                        const msg = res?.data?.Message
                        if (msg) {
                            PopupCommon.notify('error', msg)
                        }
                    }
                })
            } else {
                const editData = {
                    BD_GUID: e.BD_GUID,
                    PARENT_BD_GUID: e.PARENT_BD_GUID,
                    BD_ID: e.BD_ID,
                    BD_FULL_NAME: e.BD_FULL_NAME,
                    BD_NAME: e.BD_NAME,
                    BD_ALIAS: e.BD_ALIAS,
                    ORDER_NO: e.ORDER_NO,
                    BD_AREA: e.BD_AREA,
                    BD_USE_ID: e.BD_USE_ID,
                    BD_FUN_ID: e.BD_FUN_ID,
                    BD_TYPE_ID: e.BD_TYPE_ID,
                    AREA_TYPE: e.AREA_TYPE,
                    REMARK: e.REMARK,
                    PERSON_COUNT: e.PERSON_COUNT
                }
                AjaxCommon(`/api/Build/EditBuild`, 'post', editData).then((res) => {
                    if (res?.data?.Code == 200) {
                        PopupCommon.notify('success', oprText + '成功')
                        self.dialogShow = false
                        self.buildItem = editData
                        self.updateBuild()
                        self.$emit('success', '')
                    } else {
                        const msg = res?.data?.Message
                        if (msg) {
                            PopupCommon.notify('error', msg)
                        }
                    }
                })
            }
        },
        async getBuild() {
            const self = this
            if (this.typeList.length == 0) {
                const res = await Promise.all([
                    Utility.getDictListByTypeCode('BD_AREA_TYPE'),
                    Utility.getDictListByTypeCode('BD_USE'),
                    Utility.getDictListByTypeCode('BD_FUN'),
                    Utility.getDictListByTypeCode('H_JZQY')
                ])
                this.typeList = res
            }

            const typeList = this.typeList
            const buildItem = this.buildItem
            if (buildItem?.BD_GUID) {
                this.buildItem.BD_AREA_TYPE_NAME = ''
                this.buildItem.BD_USE_ID_NAME = ''
                this.buildItem.BD_FUN_NAME = ''
                this.buildItem.BD_TYPE_NAME = ''
                this.buildItem.BD_AREA_TYPE_NAME = typeList?.[0]?.find((t) => t.value == buildItem.AREA_TYPE)?.desc ?? ''
                this.buildItem.BD_USE_ID_NAME = typeList?.[1]?.find((t) => t.value == buildItem.BD_USE_ID)?.desc ?? ''
                this.buildItem.BD_FUN_NAME = typeList?.[2]?.find((t) => t.value == buildItem.BD_FUN_ID)?.desc ?? ''
                this.buildItem.BD_TYPE_NAME = typeList?.[3]?.find((t) => t.value == buildItem.BD_TYPE_ID)?.desc ?? ''
                if (this.buildItem.PARENT_BD_GUID == '') {
                    this.buildItem.PARENT_BD_Name = '--'
                } else {
                    AjaxCommon(`/api/Build/GetBuildInfo?bd_guid=${this.buildItem.PARENT_BD_GUID}`, 'get', null).then((res) => {
                        self.buildItem.PARENT_BD_Name = res?.data?.Message?.[0]?.BD_NAME ?? ''
                    })
                }
            }
        },
        updateBuild() {
            const typeList = this.typeList
            const buildItem = this.buildItem
            if (buildItem?.BD_GUID) {
                this.buildItem.BD_AREA_TYPE_NAME = ''
                this.buildItem.BD_USE_ID_NAME = ''
                this.buildItem.BD_FUN_NAME = ''
                this.buildItem.BD_TYPE_NAME = ''
                this.buildItem.BD_AREA_TYPE_NAME = typeList?.[0]?.find((t) => t.value == buildItem.AREA_TYPE)?.desc ?? ''
                this.buildItem.BD_USE_ID_NAME = typeList?.[1]?.find((t) => t.value == buildItem.BD_USE_ID)?.desc ?? ''
                this.buildItem.BD_FUN_NAME = typeList?.[2]?.find((t) => t.value == buildItem.BD_FUN_ID)?.desc ?? ''
                this.buildItem.BD_TYPE_NAME = typeList?.[3]?.find((t) => t.value == buildItem.BD_TYPE_ID)?.desc ?? ''
                if (this.buildItem.PARENT_BD_GUID == '') {
                    this.buildItem.PARENT_BD_Name = '--'
                } else {
                    AjaxCommon(`/api/Build/GetBuildInfo?bd_guid=${this.buildItem.PARENT_BD_GUID}`, 'get', null).then((res) => {
                        self.buildItem.PARENT_BD_Name = res?.data?.Message?.[0]?.BD_NAME ?? ''
                    })
                }
            }
        }
    }
}
</script>
<style scoped lang="scss">
.list-group-striped > .list-group-item {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
}

.list-group {
    padding-left: 0px;
    list-style: none;
}

.list-group-item {
    background-color: inherit;
    border: 1px solid #e7eaec;
    display: block;
    margin-bottom: -1px;
    padding: 10px 15px;
    position: relative;
}
.pull-right {
    float: right;
}
</style>
